<template>
  <div class="myIphone">
    <div class="headerBox">
      <van-nav-bar
      title="修改绑定手机号"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    </div>
    <div class="com_box">
      <div class="title">请完成以下认证</div>
      <span class="tix">{{'请输入' + setIphone(iphone) + '收到的短信验证码'}}</span>
      <div class="samll_box">
        <i class="icon yan"></i>
        <input type="text" v-model="code" placeholder="请输入验证码" placeholder-style="color:#D6D5D5">
        <span class="hy_code" v-if="timer==0" @click="codeFunc">发送验证码</span>
        <span class="hy_code"  v-else>{{timer+'s'}}</span>
      </div>
      <div class="samll_box">
        <i class="icon iphone"></i>
        <input type="text" v-model="newIphone" placeholder="请输入新的手机号" placeholder-style="color:#D6D5D5"> 
      </div>
      <div class="samll_box">
        <i class="icon yan"></i>
        <input type="text" v-model="newCode" placeholder="请输入新手机号验证码" placeholder-style="color:#D6D5D5">
        <span class="hy_code" v-if="timers==0" @click="codeFuncs">发送验证码</span>
        <span class="hy_code"  v-else>{{timers+'s'}}</span>
      </div>
    </div>
    <div class="footer" v-show="isOriginHei">
      <span @click="submint">提交</span>
    </div>
  </div>
</template>
<script>
import positionBtn from "../positionBtn.js";
export default {
  mixins: [positionBtn],
  data() {
    return {
      iphone: "",
      newIphone: '',
      code: '',
      newCode: '',
      timer: 0,
      timerInter: null,
      timers: 0,
      timerInters: null,
    };
  },
  created() {
    this.iphone = this.$route.query.tel;
  },
  methods: {
    userNameTest () {
      if (!this.newIphone) {
        this.$toast("请输入手机号");
        return false;
      }else if (!(/^1[3456789]\d{9}$/.test(this.newIphone))) {
        this.$toast("请输入正确手机号");
        return false
      } else {
        return true
      }
    },
    async submint() {
      let _this = this
      let res = await this.$http.updateUserTel({
        oldCode: _this.code,
        tel: _this.newIphone,
        code: _this.newCode
      })
      if (res) {
        this.$toast("修改绑定手机成功");
        this.$router.push({name: 'myInfo'})
      }
    },
    //  获取验证码
    async codeFunc () {
      let self = this
      let res = await this.$http.sendMaseeage({
        tel: self.iphone
      })
      if (res) {
        this.$toast("验证码已发送")
        self.timer = 60
        self.timerInter = setInterval(() => {
          self.timer--
          if (self.timer === 0) {
            clearInterval(self.timerInter)
          }
        }, 1000)
      } else {
        self.timer = 0
      }
    },
    //  获取验证码
    async codeFuncs () {
      let self = this
      let res = await this.$http.sendMaseeage({
        tel: self.newIphone
      })
      if (res) {
        this.$toast("验证码已发送")
        self.timers = 60
        self.timerInters = setInterval(() => {
          self.timers--
          if (self.timers === 0) {
            clearInterval(self.timerInters)
          }
        }, 1000)
      } else {
        self.timers = 0
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    setIphone(tel) {
      var reg = /^(\d{3})\d{4}(\d{4})$/;
      return tel.replace(reg, "$1****$2")
    }
  },
};
</script>
<style scoped>
.myIphone{
  width: 100%;
  height: 100vh;
  background: #fff;
}
.com_box{
  padding: .3rem .28rem;
}
.title{
  font-size: .3rem;
  color: #000;
  font-weight: bold;
  margin-bottom: .16rem;
}
.tix{
  font-size: .26rem;
}
.samll_box{
  height: 1rem;
  line-height: 1rem;
  border-bottom: .02rem solid #D6D5D5;
  margin-top: .4rem;
  position: relative;
}
.samll_box > input{
  height: 100%;
  width: 5rem;
  border: none;
  font-size: .35rem;
}
.hy_code{
  display: inline-block;
  position: absolute;
  width: 1.88rem;
  height: .61rem;
  text-align: center;
  line-height: .61rem;
  color: #00C8E7;
  border-radius: .3rem; 
  border: .02rem solid #00C8E7;
  top: .1rem;
  right: 0;
}
.footer{
  position: fixed;
  bottom: .5rem;
  background: #fff;
  height: 1rem;
  width: 100%;
  border-top: 1px solid #ddd;
  padding: .2rem .28rem 0;
  font-size: .4rem;
  text-align: center;
}
.footer span{
  display: inline-block;
  width: 6.94rem;
  height: .82rem;
  background: #00C8E7;
  text-align: center;
  line-height: .82rem;
  color: #fff;
  border-radius: .4rem;
  margin: 0 auto;
}
</style>
